<template>
  <div class="total-panle">
    <div style="background-color:#7BBAE3">
      <div class="count">{{ total.order }}</div>
      <div class="title">订单数量</div>
    </div>
    <div style="background-color:#ED8178">
      <div class="count">{{ total.payment }}</div>
      <div class="title">待付款</div>
    </div>
    <div style="background-color:#57C78A">
      <div class="count">{{ total.delivery }}</div>
      <div class="title">待发货</div>
    </div>
    <div style="background-color:#F9B382">
      <div class="count">{{ total.evaluate }}</div>
      <div class="title">待评价</div>
    </div>
    <div style="background-color:#A1C4A6">
      <div class="count">{{ total.safeguardingRights }}</div>
      <div class="title">维权中</div>
    </div>
    <div style="background-color:#ED8178">
      <div class="count">{{ total.todayOrder }}</div>
      <div class="title">今日下单量</div>
    </div>
    <div style="background-color:#7BBAE3">
      <div class="count">{{ total.todayPrice }}</div>
      <div class="title">今日订单金额</div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'total',
  props: {
    total: {
      type: Object,
      required: true,
      default: () => {
        return {
          delivery: 0,
          evaluate: 0,
          order: 0,
          payment: 0,
          safeguardingRights: 0,
          todayOrder: 0,
          todayPrice: 0,
        }
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.total-panle{
  display: flex;
  &>div{
    flex: 1;
    margin: 0 10px;
    text-align: center;
    background-color: #ccc;
    color: #fff;
  }
}
.count{
  margin-top: 25px;
  font-size: 32px;
}
.title{
  margin:10px 0;
}
</style>